<template>
  <div>
    <div v-if="!merchantList">
      <Error></Error>
    </div>
    <div v-if="merchantList" v-show="listDetails">
      <div class="dialogFormVisibleDiv">
        <el-dialog title="修改商户" :visible.sync="dialogFormVisible">
          <el-form :model="modifierForm"  ref="modifierForm">
            <el-form-item label="商户名称" :label-width="formLabelWidth" prop="name">
              <el-input v-model="modifierForm.name" autocomplete="off" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="验签密码" :label-width="formLabelWidth" prop="salt">
              <el-input v-model="modifierForm.salt" autocomplete="off" maxlength="16" show-word-limit placeholder="6到16位数字和字母组成"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" :label-width="formLabelWidth" prop="password">
              <el-input v-model="modifierForm.password" autocomplete="off" maxlength="16" show-word-limit placeholder="6到16位数字或字母组成" show-password></el-input>
            </el-form-item>
            <el-form-item label="充值金额" :label-width="formLabelWidth">
              <el-input v-model="modifierForm.money" autocomplete="off" show-word-limit type="number" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
              <el-input v-model="modifierForm.realName" autocomplete="off" maxlength="5" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="客服电话" :label-width="formLabelWidth" prop="servicePhone">
              <el-input v-model="modifierForm.servicePhone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备用手机号" :label-width="formLabelWidth" prop="standbyPhone">
              <el-input v-model="modifierForm.standbyPhone" autocomplete="off" maxlength="11" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth" prop="idNo">
              <el-input v-model="modifierForm.idNo" autocomplete="off" maxlength="18" show-word-limit></el-input>
            </el-form-item>
            <!--<el-form-item label="地区" :label-width="formLabelWidth">-->
            <!--&lt;!&ndash;prop="options"&ndash;&gt;-->
            <!--<el-cascader :options="modifierForm.options" clearable style="width: 550px"></el-cascader>-->
            <!--</el-form-item>-->
            <el-form-item label="详细地址" :label-width="formLabelWidth" prop="address">
              <el-input v-model="modifierForm.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="银行卡号" :label-width="formLabelWidth" prop="bankCard">
              <el-input v-model="modifierForm.bankCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="银行名称" :label-width="formLabelWidth" prop="bankName">
              <el-input v-model="modifierForm.bankName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="支行名称" :label-width="formLabelWidth" prop="bankFullname">
              <el-input v-model="modifierForm.bankFullname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开票类型" :label-width="formLabelWidth" prop="invoiceType">
              <el-select v-model="modifierForm.invoiceType" placeholder="请选择开票类型" style="width: 550px">
                <el-option v-for="(item,key,index) in invoiceTypeObj" :label="item" :value="key" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="modifierForm.notes" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('modifierForm')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="添加商户" :visible.sync="addFormVisible">
          <el-form :model="addForm"  ref="addForm">
            <el-form-item label="商户名称" :label-width="formLabelWidth" prop="name">
              <el-input v-model="addForm.name" autocomplete="off" maxlength="20" show-word-limit
                        placeholder="请输入商户名称"></el-input>
            </el-form-item>
            <el-form-item label="验签密码" :label-width="formLabelWidth" prop="salt">
              <el-input v-model="addForm.salt" autocomplete="off" maxlength="16" show-word-limit placeholder="6到16位数字和字母组成"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
              <el-input v-model="addForm.realName" autocomplete="off" maxlength="5" show-word-limit
                        placeholder="请输入真实性名"></el-input>
            </el-form-item>
            <el-form-item label="联系手机号" :label-width="formLabelWidth" prop="phone">
              <el-input v-model="addForm.phone" autocomplete="off" maxlength="11" show-word-limit
                        placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="备用手机号" :label-width="formLabelWidth" prop="standbyPhone">
              <el-input v-model="addForm.standbyPhone" autocomplete="off" maxlength="11" show-word-limit
                        placeholder="请输入备用手机号"></el-input>
            </el-form-item>
            <el-form-item label="客服电话" :label-width="formLabelWidth" prop="servicePhone">
              <el-input v-model="addForm.servicePhone" autocomplete="off" placeholder="请输入客服电话"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth" prop="idNo">
              <el-input v-model="addForm.idNo" autocomplete="off" maxlength="18" show-word-limit
                        placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" :label-width="formLabelWidth" prop="address">
              <el-input v-model="addForm.address" autocomplete="off" placeholder="请输入详细地址"></el-input>
            </el-form-item>
            <el-form-item label="银行卡号" :label-width="formLabelWidth" prop="bankCard">
              <el-input v-model="addForm.bankCard" autocomplete="off" placeholder="请输入银行卡号"></el-input>
            </el-form-item>
            <el-form-item label="银行名称" :label-width="formLabelWidth" prop="bankName">
              <el-input v-model="addForm.bankName" autocomplete="off" placeholder="请输入银行名称"></el-input>
            </el-form-item>
            <el-form-item label="支行名称" :label-width="formLabelWidth" prop="bankFullname">
              <el-input v-model="addForm.bankFullname" autocomplete="off" placeholder="请输入支行名称"></el-input>
            </el-form-item>
            <el-form-item label="开票类型" :label-width="formLabelWidth" prop="invoiceType">
              <el-select v-model="addForm.invoiceType" placeholder="请选择开票类型" style="width: 550px">
                <el-option v-for="(item,key,index) in invoiceTypeObj" :label="item" :value="key" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddForm('addForm')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="添加业务类型" :visible.sync="typeFormVisible">
          <el-form :model="typeForm" ref="typeForm">
            <el-form-item label="业务类型：" :label-width="formLabelWidth" prop="checkList">
              <el-checkbox-group v-model="typeForm.checkList">
                <el-checkbox v-for="(item,key,index) in businessTypeObj" :label="key" :key="index">{{item}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="typeFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitTypeForm('typeForm')">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <el-drawer
        title="商户详情"
        :visible.sync="drawer"
        direction="rtl"
        size="50%"
        :before-close="handleClose">
        <div class="drawerDiv" id="drawerDiv">
          <h2 style="margin-top: 0px">商户信息</h2>
          <p><label>商户号：</label><span>{{detailsData.mer_no}}</span></p>
          <p><label>商户名：</label><span>{{detailsData.mer_name}}</span></p>
          <p><label>真实姓名：</label><span>{{detailsData.mer_real_name}}</span></p>
          <p><label>手机号：</label><span>{{detailsData.mer_phone}}</span></p>
          <p><label>身份证号：</label><span>{{detailsData.mer_id_no}}</span></p>
          <!--<p><label>地区：</label><span>{{detailsData.mer_area_code}}</span></p>-->
          <p><label>详细地址：</label><span>{{detailsData.mer_address}}</span></p>
          <p><label>客服电话：</label><span>{{detailsData.mer_service_phone}}</span></p>
          <p><label>银行卡号：</label><span>{{detailsData.mer_bank_card}}</span></p>
          <p><label>银行名称：</label><span>{{detailsData.mer_bank_name}}</span></p>
          <p><label>支行名称：</label><span>{{detailsData.mer_bank_fullname}}</span></p>
          <p><label>账户余额：</label><span>{{detailsData.mer_money}}元</span></p>
          <p><label>开票类型：</label><span>{{detailsData.mer_invoice_type}}</span></p>
          <p><label>状态：</label><span>{{detailsData.mer_status == 1 ? '正常':'禁用'}}</span></p>
          <p><label>创建时间：</label><span>{{detailsData.mer_create_time}}</span></p>
          <h2>业务信息</h2>
          <p>
            <el-table
              :data="busData"
              style="width: 100%">
              <el-table-column
                label="业务类型"
                prop="mb_business"
                width="80"> 
              </el-table-column>
              <af-table-column
                prop="mb_total_money"
                label="历史总分润(元)"
                width="120">
              </af-table-column>
              <af-table-column
                prop="mb_balance_money"
                label="剩余分润(元)"
                width="120">
              </af-table-column>
              <af-table-column
                prop="mb_create_time"
                label="创建时间"
              >
              </af-table-column>
            </el-table>
          </p>
          <h2>业务配置</h2>
          <p>
            <el-table
              :data="configData"
              style="width: 100%">
              <el-table-column
                prop="mbc_business"
                label="业务类型"
                width="80">    
              </el-table-column>
              <el-table-column
                prop="mbc_money"
                label="所得分润(元)"
                width="110">
              </el-table-column>
              <el-table-column
                prop="mbc_money_type"
                label="金额类型"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="mbc_bank_name"
                label="申请银行"
                width="150">
              </el-table-column>
              <el-table-column
                prop="mbc_create_time"
                label="创建时间">
              </el-table-column>
            </el-table>
          </p>
        </div>
      </el-drawer>
      <div class="inquireDiv">
        <el-row>
          <el-col :span="8">
            <label>商户号：
              <el-input v-model="form.merchantName" placeholder="请输入商户号"></el-input>
            </label>
          </el-col>
          <el-col :span="8">
            <label>商户状态：
              <el-select v-model="form.merchantState" placeholder="请选择状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="正常" value="1"></el-option>
                <el-option label="禁用" value="2"></el-option>
              </el-select>
            </label>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-button type="primary" @click="examineFn">查 询</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="tableDiv" v-loading="loading">
        <el-row>
          <el-table
            :cell-class-name="addClass"
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column
              type="index"
              label="#"
              width="48px"
              min-width="40px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="mer_no"
              label="商户号"
              width="128px"
              align="center"
              >
            </el-table-column>
            <el-table-column
              prop="mer_name"
              label="商户名称"
              width="80px"
              align="center"
             >
            </el-table-column>
            <el-table-column
              prop="mer_service_phone"
              label="客服电话"
              width="130"
              align="center"
              >
            </el-table-column>
            <el-table-column
              prop="mer_money"
              label="账户余额(元)"
              width="130"
              align="center"
              >
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <span style="color:#F56C6C" v-if="scope.row.mer_status !== '1'">禁用</span>
                <span style="color:#409EFF" v-if="scope.row.mer_status == '1'">正常</span>
              </template>     
            </el-table-column>
            <el-table-column
              prop="mer_create_time"
              sortable
              align="center"
              width="182"
              label="创建时间"
            >
            </el-table-column>
            <el-table-column
              align="center">
              <template slot="header" slot-scope="scope">
                <div class="el-table-header">
                  <el-button type="primary" @click.native.prevent="addInformation" v-if="addMerchant">添加商户</el-button>
                </div>
              </template>
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="styleTypeRow(scope.$index,tableData)"
                  type="Info"
                  v-if="addBusinessMerchant"
                  size="small">
                  添加业务
                </el-button>
                <el-button
                  @click.native.prevent="detailsRow(scope.$index,tableData)"
                  v-if="getMerchantInfo"
                  type="primary"
                  size="small">
                  详情
                </el-button>
                <el-button
                  @click.native.prevent="revisionRow(scope.$index,tableData)"
                  type="warning"
                  v-if="updateMerchantInfo"
                  size="small">
                  修改
                </el-button>
                <el-button v-show="scope.row.mer_status == '1'" v-if="deleteMerchantInfo"
                           @click.native.prevent="deleteRow(scope.$index,tableData,2)"
                           type="danger"
                           size="small">
                  禁用
                </el-button>
                <el-button v-show="scope.row.mer_status !== '1'" v-if="deleteMerchantInfo"
                           @click.native.prevent="deleteRow(scope.$index,tableData,1)"
                           type="success"
                           size="small">
                  启用
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24">
            <div class="block" v-if="total">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--<transition name="page-switching" mode="out-in">-->
      <!--<router-view></router-view>-->
    <!--</transition>-->
  </div>
</template>

<script>
  import Error from '../errorPage/errorPage401'
  export default {
    data() {
      return {
        mid: '',
        invoiceType: '',
        drawer: false,
        total: '',
        currentPage: '',
        loading: true,
        form: {
          merchantName: '',
          merchantState: '',
        },
        tableData: [],
        detailsData: [],
        busData: [],
        configData: [],
        dialogFormVisible: false,
        addFormVisible: false,
        typeFormVisible: false,
        formLabelWidth: '120px',
        modifierForm: {
          name: '',
          realName: '',
          servicePhone: '',
          standbyPhone: '',
          idNo: '',
          address: '',
          bankCard: '',
          bankName: '',
          bankFullname: '',
          invoiceType: '',
          notes: '',
          region: '',
          salt:'',
          password:'',
          money:'',
        },
        addForm: {
          name: '',
          realName: '',
          servicePhone: '',
          standbyPhone: '',
          idNo: '',
          address: '',
          bankCard: '',
          bankName: '',
          bankFullname: '',
          invoiceType: '',
          notes: '',
          region: '',
          phone: '',
          salt:'',
        },
        typeForm: {
          checkList: [],
        },
        rules: {
          name: [
            {required: true, message: '请输入商户姓名', trigger: 'blur'},
            {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
          ],
          realName: [
            {required: true, message: '请输入真实姓名', trigger: 'blur'},
            {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
          ],
          servicePhone: [
            {required: true, message: '请输入客服电话', trigger: 'blur'},
          ],
          address: [
            {required: true, message: '请输入详细地址', trigger: 'blur'},
          ],
          bankCard: [
            {required: true, message: '请输入银行卡号', trigger: 'blur'},
          ],
          bankName: [
            {required: true, message: '请输入银行卡名称', trigger: 'blur'},
          ],
          bankFullname: [
            {required: true, message: '请输入支行名称', trigger: 'blur'},
          ],
          standbyPhone: [
            {min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur'}
          ],
          invoiceType: [
            {required: true, message: '请选择开票类型', trigger: 'change'}
          ],
          idNo: [
            {required: true, message: '请输入身份证号', trigger: 'blur'},
            {min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: 'blur'}
          ],
          salt: [
            {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
            {pattern: /^([\d]+[a-zA-Z]+|[a-zA-Z]+[\d]+){1,}$/, message: '必须为6到16位字母和数字组成',trigger: 'blur'}
          ],
          password: [
            {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
          ],
          options: [
            {required: true, message: '请选择省市区', trigger: 'change'}
          ],
          checkList: [
            {type: 'array', required: true, message: '请至少选择一个业务类型', trigger: 'change'}
          ]
        },
        invoiceTypeObj: {},
        businessTypeObj: {},
        //按钮权限
        updateMerchantInfo: false,
        deleteMerchantInfo: false,
        getMerchantInfo: false,
        addMerchant: false,
        addBusinessMerchant: false,
      //  页面权限
        merchantList:false,
        listDetails:true
      }
    },
    methods: {
      init: function (page) {
        let data = {
          page: page,
          no: this.form.merchantName,
          status: this.form.merchantState,
        };
        let str = this.encryptionAesRsa(data);
        let encryptData = str.split('%$#@zjt@#$%')[0];
        let encryptKey = str.split('%$#@zjt@#$%')[1];
        let incomData = {
          map: 'admin_merchant_list',
          plum_session_api: localStorage.getItem('token'),
          encryptData: encryptKey,
          encryptKey: encryptData
        };
        this.$http.post('', incomData).then((data) => {
          if (data.ec == 200) {
            this.loading = false;
            this.total = data.data.Count;
            this.currentPage = data.data.page;
            this.tableData = data.data.List;
            this.invoiceTypeObj = data.data.invoice_type;
          } else if (data.ec == 401) {
            this.$message.error(data.em);
            setTimeout(() => {
              this.exitLogin();
            }, 1500)
          } else {
            this.$message.error(data.em);
          }
        }).catch((err) => {
          this.$message.error('error!');
        })
      },
      handleCurrentChange(val) {
        this.$router.replace({
          path: this.$route.path,
          query: {
            page: val,
          }
        });
        this.loading = true;
        this.init(val);
      },
      detailsRow(index, row) {
        // this.listDetails = false;
        // this.$router.push({
        //   name:'merchantList/merchantListDetails',
        //   params:{
        //     mid:row[index].mer_id
        //   }
        // })

        this.mid = row[index].mer_id;
        this.drawer = true;
        let data = {
          m_id: this.mid,
        };
        let str = this.encryptionAesRsa(data);
        let encryptData = str.split('%$#@zjt@#$%')[0];
        let encryptKey = str.split('%$#@zjt@#$%')[1];
        let incomData = {
          map: 'admin_merchant_info',
          plum_session_api: localStorage.getItem('token'),
          encryptData: encryptKey,
          encryptKey: encryptData
        };
        this.$http.post('', incomData).then((data) => {
          if (data.ec == 200) {
            this.detailsData = data.data.info;
            this.busData = data.data.bus;
            this.configData = data.data.config;
            // let invoiceTypes = this.detailsData.mer_invoice_type;
            // switch (invoiceTypes) {
            //   case '0':
            //   this.invoiceType = '未知';
            //     break;
            //   case '1':
            //     this.invoiceType = '一般纳税人专票';
            //     break;
            //   case '2':
            //     this.invoiceType = '小规模专票';
            //     break;
            //   case '3':
            //     this.invoiceType = '小规模普票';
            //     break;
            // }
          } else if (data.ec == 401) {
            this.$message.error(data.em);
            setTimeout(() => {
              this.exitLogin();
            }, 1500)
          } else {
            this.$message.error(data.em);
          }
        }).catch((err) => {
          this.$message.error('error!');
        })
      },
      revisionRow(index, row) {
        this.mid = row[index].mer_id;
        this.dialogFormVisible = true;
        let data = {
          m_id: this.mid,
        };
        let str = this.encryptionAesRsa(data);
        let encryptData = str.split('%$#@zjt@#$%')[0];
        let encryptKey = str.split('%$#@zjt@#$%')[1];
        let incomData = {
          map: 'admin_merchant_detail',
          plum_session_api: localStorage.getItem('token'),
          encryptData: encryptKey,
          encryptKey: encryptData
        };
        this.$http.post('', incomData).then((data) => {
          if (data.ec == 200) {
            this.modifierForm.name = data.data.info.mer_name;
            this.modifierForm.realName = data.data.info.mer_real_name;
            this.modifierForm.servicePhone = data.data.info.mer_service_phone;
            this.modifierForm.standbyPhone = data.data.info.mer_standby_phone;
            this.modifierForm.idNo = data.data.info.mer_id_no;
            this.modifierForm.address = data.data.info.mer_address;
            this.modifierForm.bankCard = data.data.info.mer_bank_card;
            this.modifierForm.bankName = data.data.info.mer_bank_name;
            this.modifierForm.bankFullname = data.data.info.mer_bank_fullname;
            this.modifierForm.invoiceType = data.data.info.mer_invoice_type;
            this.modifierForm.notes = data.data.info.mer_change_notes;
            this.modifierForm.salt = data.data.info.mer_salt;
            this.modifierForm.password = '';
            this.modifierForm.money = '';
            // this.currentPage = this.$route.query.page ? this.$route.query.page : 1;
            // this.init(this.currentPage)
          } else if (data.ec == 401) {
            this.$message.error(data.em);
            setTimeout(() => {
              this.exitLogin();
            }, 1500)
          } else {
            this.$message.error(data.em);
          }
        }).catch((err) => {
          this.$message.error('error!');
        })
      },
      submitForm: function (formName) {
        // this.dialogFormVisible = false;
        // this.modifierForm.region = this.modifierForm.options[0].value + this.modifierForm.options[1].value + this.modifierForm.options[2].value
        // console.log(this.modifierForm.region);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              m_id: this.mid,
              name: this.modifierForm.name,
              real_name: this.modifierForm.realName,
              service_phone: this.modifierForm.servicePhone,
              standby_phone: this.modifierForm.standbyPhone,
              id_no: this.modifierForm.idNo,
              // area_code:'123456',
              address: this.modifierForm.address,
              bank_card: this.modifierForm.bankCard,
              bank_name: this.modifierForm.bankName,
              bank_fullname: this.modifierForm.bankFullname,
              invoice_type: this.modifierForm.invoiceType,
              notes: this.modifierForm.notes,
              salt: this.modifierForm.salt,
              password: this.modifierForm.password,
              money: this.modifierForm.money,
            };
            let str = this.encryptionAesRsa(data);
            let encryptData = str.split('%$#@zjt@#$%')[0];
            let encryptKey = str.split('%$#@zjt@#$%')[1];
            let incomData = {
              map: 'admin_merchant_update',
              plum_session_api: localStorage.getItem('token'),
              encryptData: encryptKey,
              encryptKey: encryptData
            };
            this.$http.post('', incomData).then((data) => {
              if (data.ec == 200) {
                this.dialogFormVisible = false;
                this.$message.success(data.em);
                this.init(this.currentPage)
              } else if (data.ec == 401) {
                this.$message.error(data.em);
                setTimeout(() => {
                  this.exitLogin();
                }, 1500)
              } else {
                this.$message.error(data.em);
              }
            }).catch((err) => {
              this.$message.error('error!');
            })
          } else {
            this.$message.error('请先完善信息');
            return false;
          }
        });

      },
      deleteRow(index, row, status) {
        let str = '';
        if (status == 1) {
          str = '此操作将启用该用户, 是否继续?'
        } else {
          str = '此操作将禁用该用户, 是否继续?'
        }
        this.$confirm(str, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.mid = row[index].mer_id;
          let data = {
            m_id: this.mid,
            status: status
          };
          let str = this.encryptionAesRsa(data);
          let encryptData = str.split('%$#@zjt@#$%')[0];
          let encryptKey = str.split('%$#@zjt@#$%')[1];
          let incomData = {
            map: 'admin_merchant_delete',
            plum_session_api: localStorage.getItem('token'),
            encryptData: encryptKey,
            encryptKey: encryptData
          };
          this.$http.post('', incomData).then((data) => {
            if (data.ec == 200) {
              this.$message.success(data.em);
              // this.currentPage = this.$route.query.page ? this.$route.query.page : 1;
              this.init(this.currentPage)
            } else if (data.ec == 401) {
              this.$message.error(data.em);
              setTimeout(() => {
                this.exitLogin();
              }, 1500)
            } else {
              this.$message.error(data.em);
            }
          }).catch((err) => {
            this.$message.error('error!');
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      addClass({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 4) {
          return 'cell-blue'
        }
      },
      handleClose(done) {
        done();
      },
      examineFn: function () {
        this.init(1)
      },
      addInformation: function () {
        this.addFormVisible = true
      },
      styleTypeRow: function (index, row) {
        this.mid = row[index].mer_id;
        let data = {
          m_id: this.mid,
        };
        let str = this.encryptionAesRsa(data);
        let encryptData = str.split('%$#@zjt@#$%')[0];
        let encryptKey = str.split('%$#@zjt@#$%')[1];
        let incomData = {
          map: 'admin_merchant_business_type',
          plum_session_api: localStorage.getItem('token'),
          encryptData: encryptKey,
          encryptKey: encryptData
        };
        this.$http.post('', incomData).then((data) => {
          if (data.ec == 200) {
            this.businessTypeObj = data.data.business_type;
            let number = data.data.number;
            if (number !== 0) {
              this.typeFormVisible = true
            } else {
              this.$confirm('该商户已添加过业务, 是否前去查看?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$router.push({
                  name: 'merBusinessList',
                  params: {
                    merNo: row[index].mer_no,
                  }
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消操作'
                });
              });
            }
          } else if (data.ec == 401) {
            this.$message.error(data.em);
            setTimeout(() => {
              this.exitLogin();
            }, 1500)
          } else {
            this.$message.error(data.em);
          }
        }).catch((err) => {
          this.$message.error('error!');
        })
      },
      submitTypeForm: function (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              id: this.mid,
              business: this.typeForm.checkList
            };
            let str = this.encryptionAesRsa(data);
            let encryptData = str.split('%$#@zjt@#$%')[0];
            let encryptKey = str.split('%$#@zjt@#$%')[1];
            let incomData = {
              map: 'admin_merchant_business_add',
              plum_session_api: localStorage.getItem('token'),
              encryptData: encryptKey,
              encryptKey: encryptData
            };
            this.$http.post('', incomData).then((data) => {
              if (data.ec == 200) {
                this.typeFormVisible = false;
                this.$message.success(data.em);
                this.typeForm.checkList = [];
                this.init(this.currentPage);
              } else if (data.ec == 401) {
                this.$message.error(data.em);
                setTimeout(() => {
                  this.exitLogin();
                }, 1500)
              } else {
                this.$message.error(data.em);
                this.addForm = {};
              }
            }).catch((err) => {
              this.$message.error('error!');
            });
          } else {
            return false;
          }
        });
      },
      submitAddForm: function (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              name: this.addForm.name,
              real_name: this.addForm.realName,
              phone: this.addForm.phone,
              standby_phone: this.addForm.standbyPhone,
              id_no: this.addForm.idNo,
              address: this.addForm.address,
              service_phone: this.addForm.servicePhone,
              bank_card: this.addForm.bankCard,
              bank_name: this.addForm.bankName,
              bank_fullname: this.addForm.bankFullname,
              invoice_type: this.addForm.invoiceType,
              salt: this.addForm.salt,
            };
            let str = this.encryptionAesRsa(data);
            let encryptData = str.split('%$#@zjt@#$%')[0];
            let encryptKey = str.split('%$#@zjt@#$%')[1];
            let incomData = {
              map: 'admin_merchant_add',
              plum_session_api: localStorage.getItem('token'),
              encryptData: encryptKey,
              encryptKey: encryptData
            };
            this.$http.post('', incomData).then((data) => {
              if (data.ec == 200) {
                this.$message.success(data.em);
                this.addFormVisible = false;
                this.init(1);
                this.addForm = {};
              } else if (data.ec == 401) {
                this.$message.error(data.em);
                setTimeout(() => {
                  this.exitLogin();
                }, 1500)
              } else {
                this.$message.error(data.em);
              }
            }).catch((err) => {
              this.$message.error('error!');
            });
          } else {
            return false;
          }
        });
      }
    },
    created() {
      this.currentPage = this.$route.query.page ? this.$route.query.page : 1;
      this.init(this.currentPage);
    },
    // watch:{
    //   $route(to,from) {
    //     if(to.path == '/merchantList'){
    //       this.listDetails = true
    //     }
    //   }
    // },
    mounted() {
      const that = this;
      window.onresize = () => {
        return (() => {
          that.screenHeight = window.innerHeight
        })()
      };
      // 按钮权限
      let buttonMenu = localStorage.getItem('buttonMenu');
      buttonMenu = this.edecryptButton(buttonMenu);
      if (buttonMenu.indexOf('updateMerchantInfo') !== -1) {
        this.updateMerchantInfo = true
      }
      if (buttonMenu.indexOf('deleteMerchantInfo') !== -1) {
        this.deleteMerchantInfo = true
      }
      if (buttonMenu.indexOf('getMerchantInfo') !== -1) {
        this.getMerchantInfo = true
      }
      if (buttonMenu.indexOf('addMerchant') !== -1) {
        this.addMerchant = true
      }
      if (buttonMenu.indexOf('addBusinessMerchant') !== -1) {
        this.addBusinessMerchant = true
      }
      if (buttonMenu.indexOf('merchantList') !== -1) {
        this.merchantList = true
      }
    },
    components:{
      Error
    }
  }
</script>

<style scoped>
  .inquireDiv {
    padding: 30px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .inquireDiv label {
    display: inline-block;
  }

  .inquireDiv .el-input {
    width: 220px;
  }

  .tableDiv {
    margin-top: 20px;
  }

  .el-col {
    border-radius: 4px;
    height: 75px;
    background-color: #fff;
  }

  .tableDiv >>> .el-pagination {
    height: 30px;
    line-height: 30px;
    margin-top: 25px;
    text-align: center;
  }

  .tableDiv >>> .cell-blue {
    color: #F56C6C !important;
  }

  .drawerDiv {
    width: 100%;
    height: calc(90vh);
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .drawerDiv h2 {
    text-align: center;
    font-size: 20px;
    margin: 20px 0;
  }

  .drawerDiv p {
    font-size: 16px;
    color: #000000;
    margin-top: 10px;
  }

  .drawerDiv p label {
    font-size: 16px;
    vertical-align: middle;
    font-weight: 600;
    display: inline-block;
    width: 110px;
    text-align: right;
  }

  .drawerDiv p span {
    font-size: 14px;
    vertical-align: middle;
    color: #555555;
    margin-left: 5px;
  }

  .dialogFormVisibleDiv >>> .el-dialog {
    width: 800px;
  }

  .dialogFormVisibleDiv .el-input {
    width: 550px;
  }

</style>
